<template>
  <div id="login">
      <!-- 全局样式 -->
      <el-container>
        <!-- 左侧 -->
        <el-aside width="400px">

          <el-col :span="12">
          <h5>PRICE</h5>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="1"  @click="goAll">
              <i class="el-icon-setting"></i>
              <span slot="title">All</span>
            </el-menu-item>
            <el-menu-item index="2"  @click="go0_100">
              <i class="el-icon-menu"></i>
              <span slot="title">0:00 - 100:00</span>
            </el-menu-item>
            <el-menu-item index="3"  @click="go100_500" >
              <i class="el-icon-document"></i>
              <span slot="title">100:00 - 500:00</span>
            </el-menu-item>
            <el-menu-item index="4"  @click="go500_1000">
              <i class="el-icon-setting"></i>
              <span slot="title">500:00 - 1000:00 </span>
            </el-menu-item>
            <el-menu-item index="5"  @click="go1000_2000">
              <i class="el-icon-setting"></i>
              <span slot="title" >1000:00 - 2000:00</span>
            </el-menu-item>
            
          </el-menu>
        </el-col>

         
        </el-aside>
        <!-- 右侧 -->
        <el-main>
          <ul id="uu" >
            <li v-for="item in data2" :key="item._id">
              <img v-lazy="item.productImage" alt="">
              <p>{{item.productName}}</p>
              <span>￥{{item.salePrice}}</span>
              <button>加入购物车</button>
            </li>
          </ul>
        </el-main>
      </el-container>
  </div>
</template>
<script>
import { getData2 } from "../utils/api"
export default {
  name: "login",
  data() {
    return {
      data2:[],
      listAll:[],
      list0_100:[],
      list100_500:[],
      list500_1000:[],
      list1000_2000:[],
      // 数组中的全部数据
      oldList:[],
    };
  },
  methods: {
    goAll() {
      
      this.data2 =  JSON.parse(this.oldList)
    },
    go0_100() {
      this.data2 =  JSON.parse(this.oldList)
      this.list0_100 = []
      this.data2.forEach(item => {
        if(item.salePrice < 100){
          this.list0_100.push(item)
        }
      });
      this.data2 =  this.list0_100
    },
    go100_500() {
      this.data2 =  JSON.parse(this.oldList)
      this.list100_500 = []
      this.data2.forEach(item => {
        if(item.salePrice > 100 && item.salePrice < 500){
           this.list100_500.push(item)
        }
      });
      this.data2 =  this.list100_500
    },
    go500_1000() {
      this.data2 =  JSON.parse(this.oldList)
      this.list500_1000 = []
      this.data2.forEach(item => {
        if(item.salePrice > 500 && item.salePrice < 1000){
           this.list500_1000.push(item)
        }
      });
      this.data2 =  this.list500_1000
    },
    go1000_2000() {
      this.data2 =  JSON.parse(this.oldList)
      this.list1000_2000 = []
      this.data2.forEach(item => {
        if(item.salePrice > 1000 && item.salePrice < 2000){
           this.list1000_2000.push(item)
        }
      });
      this.data2 =  this.list1000_2000
    }
  },
  // 页面创建之前
  created() {
    // 每一个列表
     getData2().then(res => {
       this.data2 = res.data.result.list
      //  把原始数据存到oldList深拷贝
       this.oldList = JSON.stringify(res.data.result.list)
       console.log(this.oldList)
     })

     }
     
  
};
</script>
<style lang="scss" scoped>
#login{
  width: 100%;
  height: 100%;
  background-color:#eee ;

}
/deep/.el-col-12 {
  width: 100%;
  ul{
    
li:hover{
  border-left: red solid 2px;
}
  }
}
.el-main{
  padding: 0;
}
/deep/.el-aside{
  background-color: #eee;
  width: 200px !important;
}
/deep/h5{
  margin: 15px !important;
}
#uu{
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
li{
  border: 1px solid #ccc;
  margin: 20px;
  display: flex;
  background-color:white ;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  width: 200px;
  height: 350px;
  img{
    width: 100%;
    height: 60%;
  }
  p,span{
    margin-left: 10px;
  }
  span{
    color: red;
    font-size: 22px;
  }
  button{
    width: 94%;
    height: 40px;
    margin: 0 auto;
    border: crimson 1px solid;
    margin-bottom: 10px;
    color: red;
  background-color:white ;

  }
}
li:hover{
  border: red solid 1px;
  box-shadow: 1px 1px 1px 1px red;
}
}
</style>
